import React, {useState} from "react";
import classNames from "classnames";

export interface BaseAlterProps {
    title?: string;
    description?: string;
    type?: 'success' | 'default' | 'danger' | 'warning';
    closable?: boolean;
    onClose?: () => void
}

type NativeDivProps = BaseAlterProps & React.HTMLAttributes<HTMLDivElement>
export type AlertType = Partial<NativeDivProps>

const Alert: React.FC<AlertType> = (props) => {
    const {
        title, description, closable, type, onClose, className ,...restProps
    } = props

    // 控制显示隐藏
    const [alertState, setAlertState] = useState(true)

    const classes = classNames('alert', className, {
        [`alert-${type}`]: type
    })
    const titleClass = classNames('alert-title', {
        'bold-title': !!description
    })

    // 关闭事件处理
    const close = (event: React.MouseEvent) => {
        event.stopPropagation()
        setAlertState(false)
        if (onClose) onClose()
    }

    return alertState ? <div className={classes} {...restProps}>
        <span className={titleClass}>{title}</span>
        {description ? <p className={'alert-desc'}>{description}</p> : null}
        {closable ? <span className="alert-close iconfont" onClick={close}>&#xe600;</span> : null}
    </div> : null
}

Alert.defaultProps = {
    title: 'this is alter',
    type: 'default',
    closable: false
}

export default Alert